<template>
  <div class="searchResult-page">
    <van-nav-bar
      :title="`${keyword}的搜索的结果`"
      left-arrow
      @click-left="$router.back()"
    />
    <van-list
      class="list-content"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group>
        <van-cell
          v-for="item in searchResultList"
          :key="item.art_id.toString()"
          @click="toDetails(item.art_id.toString())"
          :title="item.title"
        />
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
// 引入搜索相关接口
import { searchResult } from '@/api/search'
export default {
  name: 'SearchResult',
  data () {
    return {
      keyword: this.$route.query.q, // 搜索关键字
      page: 1, // 每页条数
      searchResultList: [], // 搜索列表
      loading: false, // 数据是否要更新
      finished: false // 数据是否更新完毕
    }
  },
  methods: {
    getSearchResult () {
      searchResult(this.keyword, this.page).then((res) => {
        const newArr = res.data.data.results
        // 1.把获得的数据拼接到数组的最后
        this.searchResultList = [...this.searchResultList, ...newArr]
        // 2.数据更新完毕后 把 loading 手动赋值为false
        this.loading = false
        // 3.判断数据是否全部加载完毕，如果是就把 finished 手动赋值为 false
        if (newArr.length === 0) {
          this.finished = true
        }
        // 4.可以对参数做额外的操作，比如，这里就需要对page页数做处理
        // 每次请求完下一页就需要对page也修改
        this.page++
      })
    },
    // 刚进入页面的时候，如果内容不足一页他会自动加载
    onLoad () {
      this.getSearchResult()
    },
    // 跳转至文章详情页
    toDetails (id) {
      this.$router.push({
        path: '/articleDetails',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.searchResult-page {
  // 这里有一个巨坑,一定要在布局上满足vant对于是否加载满一屏的要求
  // 否则会一直请求直到没有数据
  .list-content {
    position: fixed;
    top: 44px;
    bottom: 0;
    width: 100%;
    // 必须要加,否则无法滑动
    overflow-y: auto;
  }
}

</style>
